<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <script>
    console.log('1')
    setTimeout(() => {
      console.log('2')
    }, 0)
    console.log('3')
  </script> -->

  <button>测试xhr是异步函数</button>
  <script>
    //   document.querySelector('button').addEventListener('click', function () {
    //     console.log('1')

    //     const xhr = new XMLHttpRequest()
    //     xhr.open('post', 'http://ajax-api.itheima.net/api/login')
    //     xhr.setRequestHeader('content-type', 'application/json')

    //     xhr.addEventListener('load', function () {
    //       //   console.log(xhr.response)
    //       //   console.log(JSON.parse(xhr.response))
    //       console.log('2')
    //     })
    //     let obj = {
    //       username: 'admin',
    //       password: '123456',
    //     }
    //     xhr.send(JSON.stringify(obj))

    //     console.log('3')
    //   })
  </script>
  <!-- <script>
    setTimeout(() => {
      console.log(1)
      setTimeout(() => {
        console.log(2)
        setTimeout(() => {
          console.log(3)
          setTimeout(() => {
            console.log(3)
            setTimeout(() => {
              console.log(3)
            }, 3000)
          }, 3000)
        }, 3000)
      }, 2000)
    }, 1000)
  </script> -->

  <script>
    const xhr1 = new XMLHttpRequest()
    xhr1.open('post', 'http://ajax-api.itheima.net/api/login')
    xhr1.setRequestHeader('content-type', 'application/json')

    xhr1.addEventListener('load', function () {
      console.log(xhr1.response)
      const xhr2 = new XMLHttpRequest()
      xhr2.open('post', 'http://ajax-api.itheima.net/api/login')
      xhr2.setRequestHeader('content-type', 'application/json')

      xhr2.addEventListener('load', function () {
        //   console.log(xhr.response)
        //   console.log(JSON.parse(xhr.response))
        console.log('2')
        const xhr3 = new XMLHttpRequest()
        xhr3.open('post', 'http://ajax-api.itheima.net/api/login')
        xhr3.setRequestHeader('content-type', 'application/json')

        xhr3.addEventListener('load', function () {
          //   console.log(xhr.response)
          //   console.log(JSON.parse(xhr.response))
          console.log('2')
        })
        let obj = {
          username: 'admin',
          password: '123456',
        }
        xhr3.send(JSON.stringify(obj))
      })
      let obj = {
        username: 'admin',
        password: '123456',
      }
      xhr2.send(JSON.stringify(obj))
    })
    let obj = {
      username: 'admin',
      password: '123456',
    }
    xhr1.send(JSON.stringify(obj))
  </script>
</body>

</html>